import React,{Component,Fragment} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import styles from './index.css';
import withStyles from '../../withStyles';
class Header extends Component{
		componentWillMount() {
				if (this.props.staticContext) {
				   this.props.staticContext.csses.push(styles._getCss());
				}
		}
	render() {
		return (
			<nav className="navbar navbar-inverse navbar-fixed-top">
					<div className="container">
						<div className="navbar-header">
							<a className="navbar-brand" href="#">珠峰SSR</a>
						</div>
						<div id="navbar" className="collapse navbar-collapse">
							<ul className="nav navbar-nav">
							  <li><Link to="/">首页</Link></li>
							  <li><Link to="/user/list">用户列表</Link></li>
							  {
								!this.props.user&&<li><Link to="/login">登录</Link></li>
							  }
							  {
								this.props.user&&<Fragment><li><Link to="/logout">退出</Link></li><li><Link to="/profile">个人中心</Link></li></Fragment>
							  }
							</ul>
							{
								this.props.user&&(
									<ul className="nav navbar-nav navbar-right">
										<li><a href="#">欢迎 <span className={styles.user}>{this.props.user.username}</span></a></li>
									</ul>
								)
							}
						</div>
					</div>
				</nav>
		)
	}
}
export default connect(
	state=>state.session
)(withStyles(Header,styles));